import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  HomeOutlined, MailOutlined, AppstoreOutlined, SettingOutlined
} from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import React, { useState, useEffect, useRef } from 'react';
import { useNavigate, Outlet, useLocation } from 'react-router-dom'
import '../assets/style/layout.css'
import MenuApi from '../apis/menu'
// import {filterAuth} from '../utils/global'
const { Header, Sider, Content } = Layout;
export default function layout() {
  const location = useLocation()
  const locationPath = useRef('')

  locationPath.current = location.pathname
  // console.log(locationPath.current);
  const navigate = useNavigate()
  //是否收起
  const [collapsed, setCollapsed] = useState(false);
  //选中状态
  const [current, setCurrent] = useState(locationPath.current);
  const onClick = (e) => {
    navigate(e.key)
    setCurrent(e.key);
  };
  const avatarClick = (e) => {
    if(e.key != 'outLine'){
      navigate(e.key)
    }else{
      navigate('/login')
      localStorage.clear()
    }
    setCurrent(e.key);

  };
  //获取菜单
  function filterAuth(arr) {
    return arr.map(item => {
      const o = {
        ...item,
        label: item.name,
        key: '/layout' + item.path,
        icon: <i className={'iconfont iconfont-' + item.icon}></i>,
      }
      if (o.children) {
        o.children = filterAuth(o.children)
      }
      return o
    })
  }
  const [list, setList] = useState([])
  const Img = `http://xawn.f3322.net:8002/distremote/static/avatar/${JSON.parse(localStorage.userInfo).avatar}`
  const username = JSON.parse(localStorage.userInfo).username
  useEffect(() => {
    MenuApi.getAllSiders(username).then(res => {
      let list2 = res.data[0].children
      console.log(res.data[0].children);
      setList(filterAuth(list2))
    }
    )
  }, [])
  return (
    <div>
      <Layout style={{ height: '100vh', width: '100vw' }}>
        <Sider trigger={null} collapsible collapsed={collapsed} width='248'>
          <div className="logo" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60px' }}>
            <img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="" style={{ width: '40px', height: '18px' }} />
            <h1 style={{ height: '50px', lineHeight: '50px', margin: '0', fontSize: '23px', fontWeight: 'bolder', color: 'white', paddingLeft: '10px', overflow: 'hidden' }}><i>赤兔养车</i></h1>
          </div>
          <Menu
            theme='dark'
            onClick={onClick}
            defaultOpenKeys={[current]}
            selectedKeys={[current]}
            mode="inline"
            items={list}
          />
        </Sider>
        <Layout className="site-layout">
          <Header
            className="site-layout-background"
            style={{
              padding: 0,
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center'
            }}>

            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: () => setCollapsed(!collapsed),
            })}
            <div style={{ marginRight: '100px',width:'150px',height:'80px' }}>
              <Menu onClick={avatarClick} mode="horizontal">
            
                <Menu.SubMenu  key="SubMenu" title={username} icon={<img src={Img} alt="" style={{ width: '40px', height: '40px', borderRadius: '50%' }}></img>}>
                  <Menu.Item key="/layout/userCenter" icon={<AppstoreOutlined />}>
                    个人中心
                  </Menu.Item>
                  <Menu.Item key="three" icon={<AppstoreOutlined />}>
                    密码修改
                  </Menu.Item>
                  <Menu.Item key="four" icon={<AppstoreOutlined />}>
                    系统设置
                  </Menu.Item>
                  <Menu.Item key="outLine" icon={<AppstoreOutlined />}>
                    退出登录
                  </Menu.Item>
                </Menu.SubMenu>
              </Menu>

            </div>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              minHeight: 280,
              paddingRight: '20px',
              backgroundColor: ' #EFF2F5',
              overflow: 'scroll'
            }}
          >
            <Outlet>
            </Outlet>
          </Content>
        </Layout>
      </Layout>
    </div>
  )
}
